<template>
	<view class="pics">
		<scroll-view class="left" scroll-y>
			<view 
			@click="leftClickHandle(index,item.id)"
			:class="active===index? 'active':''" 
			 v-for="(item,index) in cates" :key="item.id"  > 
			 {{item.title}}
			 </view>
			
		</scroll-view>
		<scroll-view
		class="right" scroll-y>
			<view class="item" v-for="item in secondData" :key="item.id">
				<image @click="previewImg(item.img_url)" :src="item.img_url"></image>
				<text>{{item.title}}</text>
			</view>
			<text v-if="secondData.length===0">暂无数据</text>
		</scroll-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			cates:[],
			active:0,
			secondData:[]
		};
	},
	methods: {
	async	getPicsCate(){
		const res =await this.$myRuquest({
			url:'/api/getimgcategory'
		})
		this.cates =res.data.message;console.log(this.cates)
		this.leftClickHandle(0,this.cates[0].id)
	},
	async  leftClickHandle(index,id){
		this.active = index
		// 获取右侧的数据
		const res =  await this.$myRuquest({
			url:'/api/getimages/'+id
		})
		this.secondData = res.data.message
	},
	previewImg(current){
		const urls =this.secondData.map(item=>{
			return item.img_url
		})
		uni.previewImage({
			current,
			urls
		})
	}
	},
	
	onLoad() {
		this.getPicsCate()
	}
};
</script>

<style lang="scss">
page {
	height: 100%;
}
.pics {
	height: 100%;
	display: flex;
	.left{
		width: 200rpx;
		height: 100%;
		border-right: 1px solid #eee;
		view{
			
			height: 60px;
			line-height: 60px;
			color: black;
			text-align: center;
			font-size: 30rpx;
			border-top: 1px solid #eee;
			
		}
		.active{
			background: $shop-color;
		}
	}
	.right{
		height: 100%;
		width: 530rpx;
		margin: 0 auto;
		.item{
			width: 530rpx;
			height: 530rpx;
			border-radius: 5px;
		}
	}
	
}
</style>
